<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>back</title>
</head>
<body>
<script>
  window.addEventListener('popstate', (event) => {
    console.log('event:',event)
  });

  /** 以下三种方法都是异步方法 都可以通过监听popstate事件来探测方法触发的导航行为是否完成*/

  history.back();
  history.go(-1);

/*
  back() 方法是异步的
  等同于用户直接点击 浏览器上的【←】后退按钮 或则 调用history.go(-1)
  如果已经处于历史栈中的"第一页" 那么再调用.back() 相当于什么也没做(也不会报错,也不会触发popState)
*/



  history.forward();
  history.go(1);
/*
  forward() 方法是异步的
  等同于用户直接点击 浏览器上的【→】后退按钮 或则 调用history.go(1)
  如果已经处于历史栈中最新的一页 那么再调用.forward() 相当于什么也没做(也不会报错,也不会触发popState)
*/


  /** ↓小心死循环*/
  history.go();
  history.go(0);
/*
  history.go 方法也是异步的
  go(正数) 即是相当于点击前浏览器的前进按钮n下
  go(负数) 即是相当于点击前浏览器的后退按钮n下
  越界时 也相当于什么也没做(也不会报错 也不会触发popState)

  go()或则go(0) 相当于刷新页面 f5
*/
</script>
</body>
</html>
